<template>
	<view>
		<view class="order">
			<view class="commodity">
				<text class="title">支付方式</text>
				<text class="pay-type">严选承保</text>
			</view>
			<template v-for="pay in payOptions">
				<view class="method" :key="pay.id" @click="payType=pay.id">
					<image class="method_img" :src="pay.img" mode="widthFix"></image>
					<view class="payment">
						<view class="wx">
							<text class="title">{{pay.title}}</text>
							<view class="use">
								使用{{pay.title}}支付
								<text class="safety">{{pay.desc}}</text>
							</view>
						</view>
						<uni-icons v-if="payType==pay.id" type="circle-filled" size="23" color="#FF162E"></uni-icons>
						<uni-icons v-else type="circle" size="23" color="#ccc"></uni-icons>
					</view>
				</view>
			</template>
			
			<!-- <view class="method" v-if="!isWX" @click="payType=2">
				<image class="method_img" src="http://img.quanminyanxuan.com/service/f6fd661ef4274239a649b05f5e49da09.png" mode="widthFix"></image>
				<view class="payment">
					<view class="wx">
						<text class="title">支付宝</text>
						<view class="use">
							使用支付宝支付
							<text class="safety">支持花呗·分期</text>
						</view>
					</view>
					<uni-icons v-if="payType==2" type="circle-filled" size="23" color="#FF162E"></uni-icons>
					<uni-icons v-else type="circle" size="23" color="#ccc"></uni-icons>
				</view>
			</view> -->
			<!-- <view class="method" v-if="showMore">
				<image class="method_img" src="https://img.quanminyanxuan.com/other/c5de69ebbc004af18fdee3465bcb13e9.png" mode="widthFix"></image>
				<view class="payment">
					<view class="wx">
						<text class="title">货到付款</text>
						<view class="use">
							 活动商品暂不支持货到付款
						</view>
					</view>
					<uni-icons type="circle" size="23" color="#ccc"></uni-icons>
				</view>
			</view>
			<view class="even-more" @click="showMore=!showMore">
				<uni-icons :type="showMore?'top':'bottom'" size="13" color="#999"></uni-icons>
				<text>其他付款方式</text>
			</view> -->
		</view>
		<!-- <view class="order">
			<view class="remark">
				<text class="title">是否需要发票</text>
				<uni-icons type="circle" size="23" color="#ccc"></uni-icons>
			</view>
			<view class="remark">
				<text class="title">备注留言</text>
				<input class="content" type="text" maxlength="25" placeholder="如需延迟收货，请备注发货时间">
			</view>
		</view>
		
		<view class="not-name">
			<uni-icons type="circle-filled" size="23" color="#FF162E"></uni-icons>
			<text class="title">匿名购买</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		name:"pay-type",
		data() {
			return {
				payOptions:[
					{
						id:1,
						title:'微信',
						desc:'安全·方便',
						img:''
					}
				],
				payType:1
			};
		},
		watch:{
			payType(val){
				console.log(val)
			}
		},
		mounted() {
			if(!this.isWX){
				this.payOptions = [
					...this.payOptions,
					{
						id:2,
						title:'支付宝',
						desc:'支持花呗·分期',
						img:''
					}]
			}
		},
		computed:{
			isWX(){
				return this.$store.getters.isWX
			}
		},
	}
</script>

<style lang="scss" scoped>
	.order{
		margin: 20rpx auto;
		background-color: #fff;
		position: relative;
		border-radius: 10rpx;
		.commodity{
			width: 95%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			padding-top: 30rpx;
			font-size: $uni-font-size-lg;
			.pay-type{
				background-color: #00b34a;
				padding: 0 10rpx;
				color: #fff;
				border-radius: 30rpx;
				font-size: 11px;
				margin-left: 10rpx;
			}
			
		}
		.title{
			font-weight: bold;
		}
		.method{
			width: 95%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			.method_img{
				width: 80rpx;
				height: 80rpx;
				
			}			
			.payment{
				margin-left: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				.wx{
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-bottom: 1px solid #f5f5ff;
					padding: 40rpx 0;					
					.use{
						font-size: $uni-font-size-sm;
						color: $uni-text-color-grey;
						.safety{
							color: #FF162E;
							margin-left: 5rpx;
						}
					}
				}
			}
		}
	}
	.even-more{
		height: 80rpx;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		color: #999;
	}
	.remark{
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		align-items: center;
		justify-content: space-between;
		.content{
			font-size: $uni-font-size-sm;
		}
	}
	.not-name{		
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
	}
</style>